package com.wxn.learncompose.pagers

import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.wxn.learncompose.R

@Composable
fun SurfaceCardPager() {
    Box(modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center){
        Surface(
            modifier = Modifier.size(300.dp, 100.dp),
            shape = RoundedCornerShape(12.dp),
            shadowElevation = 8.dp,){
            Row(
                modifier = Modifier
                    .fillMaxSize()
                    .clickable { },
            ){
                Image(
                    contentScale = ContentScale.Crop,
                    modifier = Modifier.size(100.dp),
                    painter = painterResource(R.drawable.wallpaper),
                    contentDescription = "wallpager")
                Spacer(modifier = Modifier.width(10.dp))
                Column(
                    modifier = Modifier.fillMaxSize().padding(12.dp),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.Start
                ){
                    Text(text = "Fall Down", style = MaterialTheme.typography.titleMedium)
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = "李培", style = MaterialTheme.typography.bodyMedium)
                }
            }
        }
    }
}

@Preview
@Composable fun PreviewSurfaceCardPager() {
    SurfaceCardPager()
}